<template>
  <d2-container>
    <template slot="header">
      <el-button
        size="small"
        type="primary"
        :disabled="!disabled"
        @click="disabled = false"
        >修改</el-button
      >
      <el-button
        size="small"
        type="primary"
        :disabled="disabled"
        @click="editBgm()"
        >保存</el-button
      >
    </template>
    <el-form
      :label-position="'top'"
      :rules="rules"
      label-width="80px"
      ref="editForm"
      :model="formInline"
    >
      <el-form-item label="名称" prop="name" style="width:400px">
        <el-input v-model="formInline.name" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="音乐链接" prop="musicUrl" style="width:400px">
        <el-input v-model="formInline.musicUrl" :disabled="disabled"></el-input>
      </el-form-item>
    </el-form>
    <audio :src="formInline.musicUrl" controls></audio>
  </d2-container>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      disabled: true,
      formInline: {},
      rules: {
        name: [
          { required: true, message: "请输入歌曲名称", trigger: "blur" },
          {
            min: 0,
            max: 255,
            message: "长度在 0 到 255 个字符",
            trigger: "blur"
          }
        ],
        musicUrl: [
          { required: true, message: "请输入歌曲链接", trigger: "blur" },
          {
            min: 0,
            max: 1025,
            message: "长度在 0 到 1024 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  methods: {
    async editBgm() {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          var res = await api.service.post(
            "/backManage/music",
            this.formInline
          ).catch(function(error) {});
          if (res) {
            this.$message({
              message: "修改成功！",
              type: "success"
            });
          }
          this.disabled = true;
          this.getBgm();
        }
      });
    },
    async getBgm() {
      var data = await api.service.get("/backManage/music").catch(function(error) {});
      this.formInline = data;
    }
  },
  created() {
    this.getBgm();
  }
};
</script>
